package myJs.cps

import cats.effect.SyncIO
import myJs.Implicits._
import myJs.myPkg.tabs.{Tab, Tabs}
import myJs.tool.Tool.messages
import myJs.user.workflow.featureSelection.{ExampleCp, GroupCp, LibCp, MatrixCp, VarInfoCp}
import shared.pojo.Pojo.groupFileData
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.React.Fragment
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.Utils._
import myJs.myPkg.Hooks._
import myJs.myPkg.reactBootstrap._
import shared.Pojo.VarInfoDataKind
import shared.pojo.VarInfoFileData

/** Created by yz on 21/1/2022
  */
object FileModalCp {

  case class Props(
      show: Boolean = false,
      showChange: Boolean => SyncIO[Unit],
      softKind: String,
      exampleFileName: String,
      fileSelect: String => SyncIO[Unit],
      request: groupFileData.GetAll.Request,
      tabs: List[String],
      varInfoRequest:VarInfoFileData.GetAll.Request=VarInfoFileData.GetAll.Request()
  ) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val (tab, setTab) = useState(props.tabs.getOrElse(0, ""))

    object FTool {

      def handleClose = {
        props.showChange(false)
      }

      def tabChange = (v: String) => {
        setTab(v)
      }

    }

    useEffect(
      {
        setTab(props.tabs.getOrElse(0, ""))
      },
      List(props.tabs)
    )

    Modal(onHide = FTool.handleClose, show = props.show, size = "addModal")(
      Modal.Header(bsPrefix = "modal-header bg-primary", closeButton = true)(
        Modal.Title(
          span(fontWeight := "bold", id := "lblAddTitle", s"${messages("selectFile")}")
        )
      ),
      Modal.Body(
        div(
          className := "row-fluid",
          Tabs(id = "tab", activeKey = tab, onSelect = FTool.tabChange, transition = false)(
            if (props.tabs.contains("metData")) {
              Tab(eventKey = "metData", title = s"${messages("matrixFile")}")(
                div(marginTop := "20px", MatrixCp.Props(fileSelect = props.fileSelect).render)
              )
            } else EmptyVdom,
            if (props.tabs.contains("group")) {
              Tab(eventKey = "group", title = s"${messages("groupFile")}")(
                div(marginTop := "20px", GroupCp.Props(request = props.request, fileSelect = props.fileSelect).render)
              )
            } else EmptyVdom,
            if (props.tabs.contains("lib")) {
              Tab(eventKey = "lib", title = s"${messages("libFile")}")(
                div(marginTop := "20px", LibCp.Props(fileSelect = props.fileSelect).render)
              )
            } else EmptyVdom,
            if (props.tabs.contains(VarInfoDataKind.name)) {
              Tab(eventKey = VarInfoDataKind.name, title = s"${messages("varInfoFile")}")(
                div(
                  marginTop := "20px",
                  VarInfoCp
                    .Props(
                      fileSelect = props.fileSelect,
                      request=props.varInfoRequest
                    )
                    .render
                )
              )
            } else EmptyVdom,
            if (props.tabs.contains("example")) {
              Tab(eventKey = "example", title = s"${messages("exampleFile")}")(
                div(
                  marginTop := "20px",
                  ExampleCp
                    .Props(softKind = props.softKind, fileName = props.exampleFileName, fileSelect = props.fileSelect)
                    .render
                )
              )
            } else EmptyVdom,
          )
        )
      ),
      Modal.Footer(bsPrefix = "modal-footer bg-info")(
        button(
          `type` := "button",
          className := "btn green",
          dataDismiss := "modal",
          s"${messages("cancel")}",
          onClick --> FTool.handleClose
        )
      )
    )

  }

}
